<script lang="ts" setup>
import type { OpenCallbackMeta as JumpLinkOpenCallbackMeta } from '@/components/JumpLinkModal/type'
import { ECampus01Source, type XuanXiaoTeach } from '@/api/designer/model'
import CompStyle from '@/components/CompAttr/CompStyle.vue'
import { type Campus01ComponentMeta, JumpType } from '@/definitions/type'
import { useCompRefs } from '@/hooks/useCompRefs'
import { useCompStyle } from '@/hooks/useCompStyle'
import { useInstStore } from '@/stores'
import { PlusOutlined } from '@ant-design/icons-vue'
import { Button, Radio, RadioButton, RadioGroup } from 'ant-design-vue'
import { computed, toValue } from 'vue'

defineOptions({
  name: 'Campus01Attr',
  inheritAttrs: true,
})

const instStore = useInstStore()
const teachs = computed(() => instStore.jumpData?.teachs || [])
const { activeRender } = useCompStyle<Campus01ComponentMeta>()
const { JumpLinkModalRef } = useCompRefs()

// 删除
function handleDelectItem(index: number) {
  activeRender.value!.config.teachs!.splice(index, 1)
}

// 添加
function handleAddItem() {
  if (JumpLinkModalRef.value) {
    JumpLinkModalRef.value.open({
      jumpType: JumpType.Teachs as any,
    }, addCallback, {
      mode: 'multiple',
      selectedKeys: activeRender.value!.config.teachs?.map(l => l.id),
    })
  }
}

function addCallback({ applied, selectedItems }: JumpLinkOpenCallbackMeta) {
  if (applied && selectedItems) {
    activeRender.value!.config.teachs!.length = 0
    activeRender.value!.config.teachs!.push(...selectedItems as XuanXiaoTeach[])
  }
}
function handleSourceChange() {
  activeRender.value!.config.teachs!.length = 0
  if (activeRender.value!.config.source === ECampus01Source.按顺序读取) {
    activeRender.value!.config.teachs!.push(...toValue(teachs))
  }
}
function initial() {
  if (activeRender.value!.config.source === ECampus01Source.按顺序读取 && activeRender.value!.config.teachs!.length === 0) {
    activeRender.value!.config.teachs!.push(...toValue(teachs))
  }
}
initial()
</script>

<template>
  <div v-if="activeRender">
    <div class="mb-6">
      <div class="field-title">
        组件模板
      </div>
      <RadioGroup button-style="solid" :value="activeRender.config.template">
        <RadioButton v-for="item of activeRender.config.templateOptions" :key="item.value" :value="item.value">
          {{ item.label }}
        </RadioButton>
      </RadioGroup>
    </div>
    <div class="field-title">
      组件内容
    </div>
    <div class="honner-content">
      <div class="field-control-row">
        <div class="field-label">
          地址来源
        </div>
        <RadioGroup v-model:value="activeRender.config.source" button-style="solid" @change="handleSourceChange">
          <Radio v-for="item of activeRender.config.sourceOptions" :key="item.value" :value="item.value">
            {{ item.label }}
          </Radio>
        </RadioGroup>
      </div>
      <div class="field-control-row">
        <div class="field-label mt-1.5">
          地址分类
        </div>
        <div class="field-box">
          <div v-for="(item, index) in activeRender.config.teachs" :key="item.id" class="field-input">
            <i class="iconfont icon-bianjiqi_tuozhuai cursor-pointer" />
            <div class="py-2.5 px-14px">
              {{ item.name }}
            </div>
            <i class="iconfont icon-bianjiqi_shanchu icon-del" @click="handleDelectItem(index)" />
          </div>
        </div>
      </div>
      <Button size="large" style="width: 100%" type="primary" ghost @click="handleAddItem">
        <template #icon>
          <PlusOutlined />
        </template> 添加校区
      </Button>
    </div>
    <CompStyle />
  </div>
</template>

<style lang="less" scoped>
.field-title {
  color: var(--app-text-color-main);
  @apply font-700 text-sm mb-14px;
}

.honner-content {
  @apply flex flex-col gap-3 w-full;

  .field-box {
    @apply flex flex-col rounded mr-3 relative w-full mr-8;
    gap: 14px;

    .field-input {
      @apply pl-3 flex flex-row items-center;
      background: #F5F5F5;
    }

    .icon-del {
      @apply absolute top-2 -right-8 text-2xl cursor-pointer text-[#999];
    }
  }

  .field-control {
    color: var(--app-text-color-main);
    @apply flex flex-col gap-2;

    .field-label {
      color: var(--app-text-color-second);
      @apply text-sm whitespace-nowrap;
    }
  }

  .field-control-row {
    color: var(--app-text-color-main);
    @apply flex flex-row gap-2;

    .field-label {
      color: var(--app-text-color-second);
      @apply text-sm whitespace-nowrap;
    }
  }

  .option-box {
    @apply flex flex-col gap-1.5 absolute top-0 -right-8 text-[#999];

    .iconfont {
      @apply text-2xl leading-6 cursor-pointer;
    }
  }

}
</style>
